<template>
  <el-dialog :title="!dataForm.id ? '缴纳定金' : isDetail ? '详情' : '编辑'" :close-on-click-modal="false" :visible.sync="visible" class="cu-dialog cu-dialog_center" lock-scroll width="1000px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
        <el-col :span="12">
          <el-form-item label="支付时间" prop="paymentTime">
            <el-date-picker v-model="dataForm.paymentTime" placeholder="请选择" clearable required :style="{ width: '100%' }" type="datetime" value-format="timestamp"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付金额" prop="payedAmount">
            <el-input v-model="dataForm.payedAmount" placeholder="请输入" clearable required :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式" prop="paymentCode">
            <el-select v-model="dataForm.paymentCode" placeholder="请选择支付方式" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in paymentCodeOptions" :key="index" :label="item.fullName" :value="item.enCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付单号" prop="tradeNo">
            <el-input v-model="dataForm.tradeNo" placeholder="请输入" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付状态" prop="payStatus">
            <el-select v-model="dataForm.payStatus" placeholder="请选择" clearable required>
              <el-option v-for="item in payStatusOptions" :key="item.enCode" :label="item.fullName" :value="item.enCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="订单备注" prop="notes">
            <el-input v-model="dataForm.notes" placeholder="请输入" clearable required :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail" v-loading.fullscreen.lock="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getOrderInfo, createOrder, updateOrder } from '@/api/campus/order'
export default {
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      teacherBoxVisible: false,
      isDetail: false,
      dataForm: {
        id: '',
        objectId: undefined,
        orderType: 'join',
        orderTitle: '支付定金',
        campusId: undefined,
        paymentCode: undefined,
        paymentTime: undefined,
        payedAmount: undefined,
        orderAmount: undefined,
        tradeNo: undefined,
        memo: undefined,
        source: 'Offline',
        payStatus: 'Yes',
        status: 'Normal',
        confirmStatus: 'ReceiptNotConfirmed',
        notes: undefined
      },
      train: undefined,
      rules: {
        paymentCode: [
          {
            required: true,
            message: '请输入支付类型',
            trigger: 'blur'
          }
        ],
        paymentTime: [
          {
            required: true,
            message: '请输入支付时间',
            trigger: 'blur'
          }
        ],
        payedAmount: [
          {
            required: true,
            message: '请输入支付金额',
            trigger: 'blur'
          }
        ],
        payStatus: [
          {
            required: true,
            message: '请选择支付状态',
            trigger: 'blur'
          }
        ]
      },
      payStatusOptions: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getPayOrderCodeOptions()
    this.getPayStatusOptions()
  },
  methods: {
    goBack() {
      this.$emit('refresh')
    },
    getPayOrderCodeOptions() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'PaymentsType' }).then(res => {
        this.paymentCodeOptions = res
      })
    },
    getPayStatusOptions() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'PayStatus' }).then(res => {
        this.payStatusOptions = res
      })
    },
    init(id, customerId, isDetail) {
      this.dataForm.id = id || 0
      this.dataForm.objectId = customerId
      this.visible = true
      this.isDetail = isDetail || false
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields()
        this.dataForm.trainSignList = []
        if (this.dataForm.id) {
          getOrderInfo(id).then(res => {
            this.dataForm = res.data
          })
        }
      })
    },
    dataFormSubmit() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          this.loading = true

          const formMethod = this.dataForm.id ? updateOrder : createOrder
          formMethod(this.dataForm)
            .then(res => {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.$emit('refresh', true)
                  this.closeDialog()
                }
              })
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },

    closeDialog() {
      this.visible = false
      this.loading = false
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>
